<template>
  <div>
    <p>
      {{ id }}
    </p>
    <p>
      {{ type }}
    </p>
    <button @click="change()">click</button>
  </div>
</template>

<script>
import { reactive, toRefs, watch } from 'vue';
export default {
  setup() {
    let state = reactive({
      id: 1,
      type: '偶数',
    });

    //监听state.id的值的变化
    const stop = watch(
      () => state.id,
      (cur, old) => {
        if (cur % 2 == 0) {
          state.type = '偶数';
        } else {
          state.type = '奇数';
        }
      }
    );
    const change = () => {
      state.id += 1;
      if (state.id == 15) {
        // 调用停止函数，清除对应的监听
        stop();
      }
    };
    return {
      ...toRefs(state),
      change,
    };
  },
};
</script>
